<template>
  <div>
    <van-nav-bar
        title="修改密码"
        fixed
        left-arrow
        @click-left="goBack()"
    />

    <div style="padding: 8vh 0 0 0">


      <van-form @submit="onSubmit">

        <van-field
            v-model="user.account"
            name="account"
            label="账号"
            placeholder="请输入账号"
            disabled
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="user.oldPassword"
            type="password"
            name="oldPassword"
            label="旧密码"
            placeholder="请输入旧密码"
            :rules="[{ required: true, message: '请输入旧密码' }]"
        />
        <van-field
            v-model="user.newPassword1"
            type="password"
            name="newPassword1"
            label="新密码"
            placeholder="请输入新密码"
            :rules="[{ required: true, message: '请输入新密码' }]"
        />
        <van-field
            v-model="user.newPassword2"
            type="password"
            name="newPassword2"
            label="重复密码"
            placeholder="请重复密码"
            :rules="[{ required: true, message: '请重复密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>


    </div>
  </div>
</template>

<script>

import {Toast} from "vant";

export default {
  data() {
    return {
      user: {
        id: "",
        account: "",
        oldPassword: "",
        newPassword1: "",
        newPassword2: "",
      },
    }
  },
  mounted() {
    this.userDetail();
  },
  methods: {

    onSubmit(values) {
      if(this.user.newPassword2 === this.user.newPassword1) {
        this.http.post("/api/phx/user/password/update", {
          oldPassword: this.user.oldPassword,
          newPassword: this.user.newPassword1,
        }).then((res) => {
          this.goBack();
        })
      } else {
        Toast("两次密码不一致，请重新输入")
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    userDetail() {
      this.http.get("/api/phx/user/detail?userId=").then((res) => {
        let temp = res.data.data;

        this.user.account = temp.account;
        this.user.id = temp.id;
      });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>